<template>
    <section class="todoapp">
        <!-- header -->
        <header class="todoapp-header">
            <h1 class="todoapp-header-til">todos</h1>
            <label class="todoapp-header-ico"></label>
            <input
                v-on:keyup.enter="addTodo"
                class="todoapp-header-inp"
                type="text"
                autofocus="autofocus"
                autocomplete="off"
                placeholder="What needs to be done?">
            </input>
        </header>
        <!-- main section -->
        <ul class="todoapp-main">
            <li v-for="(v,k) in filterTodos"
                v-bind:key="k"
                class="todoapp-main-item">
                <div>
                    <input
                        v-bind:checked="v.done"
                        v-on:change="toggleTodo(v)"
                        class="todoapp-main-status"
                        type="checkbox">
                    </input>
                    <button
                        v-on:click="deleteTodo(v)"
                        class="todoapp-main-clear"></button>
                    <label
                        v-text="v.text"
                        v-bind:class="{'active': v.done}"
                        class="todoapp-main-text">
                    </label>
                </div>
                <!-- <input class="edit">
                </input> -->
            </li>
        </ul>
        <!-- footer -->
        <footer class="todoapp-footer">
            <span class="todoapp-footer-num" v-text="todosLength"></span>
            <ul class="todoapp-footer-state">
                <li v-for="(v,k) in switchTodos"
                    v-bind:key="k"
                    v-text="k"
                    v-on:click="visibility=k"
                    v-bind:class="{'active': visibility==k}"
                    class="todoapp-flooter-btn">
                </li>
            </ul>
            <button
                v-on:click="clearCompleted"
                class="todoapp-footer-clear">clear completed</button>
        </footer>
    </section>
</template>

<script>
const filters = {
    all: todos => todos,
    active: todos => todos.filter(todos => !todos.done),
    completed: todos => todos.filter(todos => todos.done)
}

export default {
    name: 'page2',
    data () {
        return {
            visibility: 'active',
            switchTodos: filters
        }
    },
    computed: {
        todos () {
            return this.$store.state.page2.todos
        },
        filterTodos () {
            return filters[this.visibility](this.todos)
        },
        todosLength () {
            return (this.filterTodos.length || 0) + ' item left'
        }
    },
    methods: {
        addTodo (e) {
            var text = e.target.value
            this.$store.commit('addTodo', { text })
            e.target.value = ''
        },
        deleteTodo (todo) {
            this.$store.commit('deleteTodo', { todo })
        },
        clearCompleted () {
            this.$store.commit('clearCompleted')
        },
        toggleTodo (todo) {
            this.$store.commit('toggleTodo', { todo })
        }
    },
    created () {
        console.log(this)
        console.log(...[14, 3, 77])
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .todoapp{
        position: absolute;
        top:50%;
        left:50%;
        transform: -webkit-translate(-50%,-50%);
        transform: translate(-50%,-50%);
        max-width: 550px;
    }
    .todoapp-header-til{
        width: 100%;
        font-size: 100px;
        font-weight: 100;
        text-align: center;
        color: rgba(255,255,255,1);
        -webkit-text-rendering: optimizeLegibility;
        -moz-text-rendering: optimizeLegibility;
        text-rendering: optimizeLegibility;
    }
    .todoapp-header-ico{
        width: 60px;
        height: 65px;
        font-size: 0;
        position: absolute;
        left:0;
        top:auto;
        z-index: 2;
    }
    .todoapp-header-ico::before{
        content: '\276F';
        font-size: 22px;
        line-height: 65px;
        color: #737373;
        padding: 10px 27px 10px 27px;
    }
    .todoapp-header-inp{
        box-sizing: border-box;
        position: relative;
        width: 100%;
        padding: 16px 16px 16px 60px;
        margin:0;
        background: rgba(255,255,255,1);
        border: none;
        font-size: 24px;
        font-family: inherit;
        font-weight: inherit;
        line-height: 1.4em;
        color: rgb(77,77,77);
        box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .todoapp-header-inp::-webkit-input-placeholder {
        font-style: italic;
        font-weight: 300;
        color: #e6e6e6;
    }
    .todoapp-header-inp::-moz-placeholder {
        font-style: italic;
        font-weight: 300;
        color: #e6e6e6;
    }
    .todoapp-header-inp::input-placeholder {
        font-style: italic;
        font-weight: 300;
        color: #e6e6e6;
    }
    .todoapp-footer{
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        height: 20px;
        background-color: #ffffff;
        border-top: 1px solid #e6e6e6;
        color: #777;
        text-align: center;
    }
    .todoapp-footer-num{

    }
    .todoapp-footer-state{

    }
    .todoapp-flooter-btn{
        float:left;
        margin:0 4px;
        cursor: pointer;
    }
    .todoapp-flooter-btn.active{
        color: rgba(175, 47, 47, 0.5);
    }
    .todoapp-footer-clear{
        background-color: white;
    }
    .todoapp-main{
        background: #ffffff;
    }
    .todoapp-main-item{
        position: relative;
        font-size: 24px;
        border-bottom: 1px solid #ededed;
    }
    .todoapp-main-status{
        float:left;
        width: 58px;
        height: 58px;
        opacity: 0;
    }
    .todoapp-main-text{
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: center left;
        word-break: break-all;
        padding: 15px 15px 15px 60px;
        display: block;
        color: #4d4d4d;
        line-height: 1.2;
        transition: color 0.4s;
        text-align: left;
    }
    .todoapp-main-text.active{
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
        color: #d9d9d9;
        text-decoration: line-through;
    }
    .todoapp-main-clear{
        float:right;
        display: block;
        width: 58px;
        height: 58px;
        margin: 0 10px 0 0;
        transition: color 0.2s ease-out;
        background: none;

        font-size: 30px;
        color: #cc9a9a;
        font-family: inherit;
        font-weight: inherit;

        -webkit-appearance: none;
        appearance: none;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .todoapp-main-clear::after{
        content: '\D7';
    }
</style>
